<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      background: #eee;
    }
  </style>
</head>
<body>
  <canvas id='canvas' width='600' height='400'></canvas>
</body>
</html>
<script>
  
  function lineChart (arr){
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let h = canvas.height;
    let w = canvas.width;
    canvas.height = h * 2;
    canvas.width = w * 2;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';

    let chartW =  canvas.width - 200;// 设置的是表的宽度  200 是为了左右有 100的间隙
    let chartH = canvas.height - 160;// 设置的是表的高度  160 是为了上下有 80的间隙

    let originX = 100,
        originY = chartH + 80;// 设置坐标系原点
    // 根据数据的最大值设置 y轴刻度
    let max = 0;
    for(let i = 0; i < arr.length;i++){
      if(max < arr[i][1]){
        max = arr[i][1]
      }
    }  
    max = max + 100;// 为了不让最大致直接铁道顶部
    let yNum = 10;// y轴分成10分  
    let xNum = arr.length;// 把x轴分成 多少分是由数据量来决定的
 
    function drawLine(x0,y0,x1,y1){
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(x0,y0);
      ctx.lineTo(x1,y1);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    }
  
    //绘制x轴
    ctx.strokeStyle = '#f00';
    ctx.lineWidth = 2
    drawLine(originX,originY,originX+chartW,originY)

    ctx.save();
    ctx.font = '25px 微软雅黑';
    ctx.fillStyle = '#f00';
    ctx.fillText("月份",originX+chartW/2,originY+60)
    ctx.restore()
    
    // 绘制y轴
    drawLine(originX,originY,originX,80)
    ctx.save();
    ctx.font = '25px 微软雅黑';
    ctx.fillStyle = '#f00';
    ctx.rotate(-Math.PI/2)
    // ctx.fillText("访问量",originX,originY-chartH/2)
    ctx.fillText("访问量",-canvas.height/2,30)
    ctx.restore()


    // 绘制y轴刻度及辅助线
    ctx.textAlign = 'right';
    ctx.font = '20px 微软雅黑'
    for(let i = 0; i <= yNum; i++){
      if(i>0){
        ctx.strokeStyle = 'rgba(0,0,0,0.3)'
        drawLine(originX,originY - (chartH/yNum)*i,originX+chartW,originY - (chartH/yNum)*i)
      }
      ctx.fillText(max/yNum*i,originX-5,originY - (chartH/yNum)*i)
    }

    // 绘制x轴刻度及辅助线
    ctx.textAlign = 'center';
    for(let i = 0 ; i < xNum; i++){
      if(i > 0){
        drawLine(originX + chartW/xNum*i,originY,originX + chartW/xNum*i,80)
      }
      ctx.fillText(arr[i][0],originX + chartW/xNum*i,originY+25)
    }


    // 绘制折线
    ctx.strokeStyle = '#333';
    ctx.beginPath();
    for(let i = 0; i < xNum; i++){
      if(i == 0){
        ctx.moveTo(originX+i*chartW/xNum,originY - chartH/max*arr[i][1])
        ctx.fillText(arr[i][1],originX+i*chartW/xNum,originY - chartH/max*arr[i][1])
      }else{
        ctx.lineTo(originX+i*chartW/xNum,originY - chartH/max*arr[i][1])
        ctx.fillText(arr[i][1],originX+i*chartW/xNum,originY - chartH/max*arr[i][1])
      }
    }
    
    ctx.stroke()
    ctx.lineTo(originX+chartW - chartW/xNum,originY);
    ctx.lineTo(originX,originY);

    // ctx.stroke()
    let grad = ctx.createLinearGradient(0,500,0,0);
    grad.addColorStop(0,'rgba(255,0,0,0.1)')
    grad.addColorStop(1,'rgba(255,0,0,0.7)')
    ctx.fillStyle = grad
    ctx.fill()

    for(let i = 0; i < xNum; i++){
      ctx.beginPath()
      ctx.fillStyle = '#000'
      ctx.arc(originX+i*chartW/xNum,originY - chartH/max*arr[i][1],3,0,Math.PI*2)

      ctx.fill()
    }
    


    // ctx.fill()

  }
  var chartData = [["2017/01", 50], ["2017/02", 60], ["2017/03", 100], ["2017/04",200], ["2017/05",350], ["2017/06",600]];
  lineChart(chartData);
</script>